<template>
  <div class="internationalticket">
    <el-form ref="form" :model="members" size="mini" style="display: flex">
      <el-form-item label="会员姓名" style="display: flex; margin: 0 20px 0 0">
        <el-input v-model="members.customerName"></el-input>
      </el-form-item>
      <el-form-item label="预定卡号" style="display: flex; margin: 0 20px 0 0">
        <el-input style="width: 240px" v-model="members.customerCard"></el-input>
      </el-form-item>
      <el-form-item label="卡种" style="display: flex">
        <el-input v-model="members.cardType"></el-input>
      </el-form-item>
    </el-form>
    <div>乘客信息</div>
    <el-table :data="tableData" size="mini"  tooltip-effect="dark"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="乘客姓名" width="120">
      </el-table-column>
      <el-table-column prop="voyage" label="航程" width="150"> </el-table-column>
      <!-- <el-table-column prop="name" label="退票意愿" width="150"> </el-table-column> -->
      <el-table-column prop="licenseNumber" label="证件号" width="150"> </el-table-column>
      <el-table-column prop="airline" label="航空公司" width="100"> </el-table-column>
      <el-table-column prop="flightNumber" label="航班" width="90"> </el-table-column>
      <el-table-column prop="cabinSeat" label="舱位" width="90"> </el-table-column>
      <el-table-column prop="ticketNumber" label="票号" width="120"> </el-table-column>
      <el-table-column prop="departureTime" label="出发时间" > </el-table-column>
      <!-- <el-table-column prop="name" label="销售价" width="90"> </el-table-column> 
      <el-table-column prop="name" label="净价" width="90"> </el-table-column>
      <el-table-column prop="name" label="税金" width="90"> </el-table-column> -->
      <el-table-column prop="totalReceivables" label="应收总额" width="90"> </el-table-column>
      <el-table-column prop="amountsPayable" label="应付票款金额 " width="120"> </el-table-column>
    </el-table>
    <!-- 退款金额 -->
      <div style="margin:20px 0 20px 0;display:flex;">
       <span>应收手续费：</span>
       <span><el-input size="mini" @input="change" v-model="poundage" placeholder="请输入内容"></el-input></span>
     </div>
      <div style="margin:20px 0 20px 0">
       <span>退款金额：</span>
       <span>{{refund}}</span>
     </div>
     <!-- 退款方式 -->
     <div style="display:flex;">
        <div>退款方式：</div>
         <el-radio-group @change="changeradio" v-model="radio" style="margin:4px 0 0 10pxp;">   
          <el-radio :label="3">原路返回</el-radio></el-radio>
          <el-radio :label="6">预留款</el-radio>
        </el-radio-group>
     </div>
     <div style="margin:20px 0 0 0">
       <div style="margin:0 0 10px 0;color:red;">备注信息:</div>
      <el-input type="textarea" v-model="remark" :rows="2" placeholder="多行输入"></el-input>
     </div>
     <el-button style="margin:20px 20px 10px 48%" type="primary" @click="saverefund">保存 </el-button>
  </div>
</template>

<script>
export default {
  name: "internationalticket",
  data() {
    return {
      PassengerIdList:[],
      Arefundnum:"",
      refund:"",
      Arefund:[],
      arr:[],
      // 手续费
      poundage:'',
      // 退款方式
      radio:3,
      changeradioList:"backtrack",
      // 会员信息
      members: {},
      // 乘客信息
      tableData: [],
      handlingFee:"",
      remark:""
    };
  },
  methods: {
    // 退票接口
    postflightrefund(){
     
      this.$axios.postflightrefund({
        id:this.ticketid,
          // 乘车人id
          PassengerIdList:this.PassengerIdList,
          // 退款金额
          amount:this.refund,
          // 退票服务费
          handlingFee:this.handlingFee,
          payWay:'Crm',
          // 备注
          remark:this.remark,
          type:this.changeradioList
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){

        }
      })
    },
    // 服务费
    change(row){
      console.log(row)

      this.handlingFee=row
      this.refund=this.Arefundnum-row
      if(row>this.Arefundnum){
          this.$message({
                message:'退票费金额不得大于票价金额',
                type: "warning",
              });
        this.refund=this.Arefundnum
         this.handlingFee=''
      }
    },
    // 详情
    getselectRefundDetails(){
      this.$axios.getselectRefundDetails({
          id:this.ticketid
          // id:'1654074720'
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.members=res.data
          this.tableData= this.members.orderRefundVos
        }
      })
    },
     // 表格选择退票人
    handleSelectionChange(passengerList) {
     
      console.log(passengerList);
     let arr = []
    if(passengerList.length>0) {
      passengerList.map(item=>{
        let obj = {
          id:item.passengerId,
          money:item.amountsPayable
        }
        arr.push(obj)
      })
    } else {

    }

    // 价钱
      let price = 0
      arr.forEach(item=>{
        price += item.money*1
      })
      console.log(arr,price)
      this.Arefundnum=price

      // id
      let num = passengerList.map(item=>{
        return item.passengerId
      })
      console.log(num)
     this.PassengerIdList=num
     console.log(this.PassengerIdList)
    },
    // 保存按钮
    saverefund(){
      if(this.refund=='' || this.handlingFee=='' || !this.PassengerIdList || this.remark==''){
         this.$message({
          message: '请填写完整信息进行退票',
          type: 'warning'
        });
      }else{
      this.postflightrefund()
      }
    },
    // 退款方式
    changeradio(row){
      console.log(row)
      this.changeradioList=row
       if(this.changeradioList=='3'){
        this.changeradioList='backtrack'
      }
       if(this.changeradioList=='6'){
        this.changeradioList='reserveMoney'
      }
      console.log(this.changeradioList)
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
  },
  mounted() {
  // 订单id
  this.ticketid = this.$route.params.ticketid;
  console.log(this.ticketid);
  // 详情
  this.getselectRefundDetails()
  },
};
</script>

<style  scoped>
.internationalticket {
  margin: 20px;
}
</style>